<template>
    <div id='myApp'>
        <Row style="margin-bottom: 10px;border-bottom: 1px solid #eeeeee;">
            <Col span="7" style="border-bottom:2px solid #2d8cf0 ;padding: 0 0 8px 2px;">
            <span style="color: #2d8cf0;">
                <Icon class="ivu-icon-dataExplore" />&nbsp;&nbsp;
                <span style="color: black;">数据管理&nbsp;&nbsp;>&nbsp;&nbsp;</span>
                <span style="color: black;">SQL查询&nbsp;&nbsp;>&nbsp;&nbsp;</span>
                可视化探索
            </span>
            </Col>
            <Col span="4" offset="13" style="display: flex;justify-content: flex-end;margin-top: -4px;">
                <Button type="warning" 
                @click="jumpPage('/dataExplore')"
                label="small" class="btnOperation">上一步</Button>
                <Button type="primary" label="small" 
                @click="jumpPage('/dataDimension')"
                class="btnOperation btnMargin">下一步</Button>
            </Col>
        </Row>
        <Row>
            <Col>
                <div class="slider">
                   <ul class="container" :style="containerStyle" >
                     <li 
                   v-for="(item,index) in echartTypeHead"
                   :class="{'active':item.color}" @click="selectChart(item.value)">
                     <span>{{item.name}}</span>
                    </li>
                   </ul>
                </div>
            </Col>
            <Col>
                <div v-if="echartType.line" style="margin-top: 18px;">
                    <p  style="color: #515a6d;font-weight: bold;width: 150px;font-size: 16px;">折线图:</p>
                    <div style="margin-top: 12px;">
                        <Col :span='4'
                        style="margin-right: 20px;"
                        v-for="(item,index) in lineImg" :key="index"
                        >
                            <img :src="item.img" 
                            :class="{'select':item.echartColor}"
                            @click="chooseChart(index,item.chart,'lineImg')"
                            style="width: 100%;">
                        </Col>
                    </div>
                </div>
                <div v-if="echartType.bar" style="margin-top: 18px;">
                    <p  style="color: #515a6d;font-weight: bold;width: 150px;font-size: 16px;">柱状图:</p>
                    <div style="margin-top: 12px;">
                        <Col :span='4'
                        style="margin-right: 20px;"
                        v-for="(item,index) in barImg" :key="index"
                        >
                            <img :src="item.img" 
                            :class="{'select':item.echartColor}"
                            @click="chooseChart(index,item.chart,'barImg')"
                            style="width: 100%;">
                        </Col>
                    </div>
                </div>
                <div v-if="echartType.pie" style="margin-top: 18px;">
                    <p  style="color: #515a6d;font-weight: bold;width: 150px;font-size: 16px;">饼图</p>
                    <div style="margin-top: 12px;">
                        <Col :span='4'
                        style="margin-right: 20px;"
                        v-for="(item,index) in pieImg" :key="index"
                        
                        >
                            <img :src="item.img" 
                            :class="{'select':item.echartColor}"
                        @click="chooseChart(index,item.chart,'pieImg')"
                            style="width: 100%;">
                        </Col>
                    </div>
                </div>
                <div v-if="echartType.scatter" style="margin-top: 18px;">
                    <p style="color: #515a6d;font-weight: bold;width: 150px;font-size: 16px;">散点图</p>
                    <div style="margin-top: 12px;">
                        <Col :span='4'
                        style="margin-right: 20px;"
                        v-for="(item,index) in scatterImg" :key="index"
                        >
                            <img :src="item.img"
                            :class="{'select':item.echartColor}"
                            @click="chooseChart(index,item.chart,'scatterImg')" 
                            style="width: 100%;">
                        </Col>
                    </div>
                </div>
                <div v-show="echartType.map" style="margin-top: 18px;">
                    <p style="color: #515a6d;font-weight: bold;width: 150px;font-size: 16px;">地图</p>
                    <div style="margin-top: 12px;">
                        <Col :span='4'
                        style="margin-right: 20px;"
                        v-for="(item,index) in mapImg" :key="index"
                        >
                            <img :src="item.img"
                            :class="{'select':item.echartColor}"
                            @click="chooseChart(index,item.chart,'mapImg')" 
                            style="width: 100%;">
                        </Col>
                    </div>
                </div>
                <div v-show="echartType.funnel" style="margin-top: 18px;">
                    <p style="color: #515a6d;font-weight: bold;width: 150px;font-size: 16px;">漏斗图</p>
                    <div style="margin-top: 12px;">
                        <Col :span='4'
                        style="margin-right: 20px;"
                        v-for="(item,index) in funnelImg" :key="index"
                        >
                            <img :src="item.img" 
                            :class="{'select':item.echartColor}"
                            @click="chooseChart(index,item.chart,'funnelImg')"
                            style="width: 100%;">
                        </Col>
                    </div>
                </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    import { mapState, mapActions } from 'vuex'
    import zmitiUtil from '../../../lib/util'
    import * as seleData from '../../../lib/dataInfor'
    import {echartType} from '../../../lib/table_definition'
    import echarts from 'echarts';

    export default {
        computed: mapState({
            Authorization: state => state.Authorization
        }),

        data() {
            return {
                distance:1,
                label1: (h) => {
                    return h('div', [
                        h('span', {
                            style: {
                                
                            },
                            on: {
                                click: () => {
                                }
                            }
                        }, '折线图')
                    ])
                },
                label2: (h) => {
                    return h('div', [
                        h('span', {
                            style: {
                                
                            },
                            on: {
                                click: () => {
                                  
                                }
                            }
                        }, '柱状图')
                    ])
                },
                label3: (h) => {
                    return h('div', [
                        h('span', {
                            style: {
                                
                            },
                            on: {
                                click: () => {
                                  
                                }
                            }
                        }, '饼图')
                    ])
                },
                label4: (h) => {
                    return h('div', [
                        h('span', {
                            style: {
                                
                            },
                            on: {
                                click: () => {
                                  
                                }
                            }
                        }, '散点图')
                    ])
                },
                label5: (h) => {
                    return h('div', [
                        h('span', {
                            style: {
                                
                            },
                            on: {
                                click: () => {
                                  
                                }
                            }
                        }, '地图')
                    ])
                },
                label6: (h) => {
                    return h('div', [
                        h('span', {
                            style: {
                                
                            },
                            on: {
                                click: () => {
                                }
                            }
                        }, '漏斗图')
                    ])
                },
                echartType:{
                    line:"",//折线图
                    bar:"",//柱状图
                    pie:"",//饼图
                    scatter:"",//散点图
                    map:"",//地图
                    funnel:""//漏斗图
                },
                // echartSubclass:{
                //     basic_line:"",
                //     area_line:"",
                //     multi_line:"",
                //     stack_line:"",
                //     smooth_line:"",
                //     basic_bar:"",
                //     multi_bar:"",
                //     bidirection_bar:"",
                //     bidirection_bar:"",
                //     stack_bar:"",
                //     basic_pie:"",
                //     doughnut_pie:"",
                //     scrolled_pie:"",
                //     basic_scatter:"",
                //     bubble_scatter:"",
                //     effect_sccatter:"",
                //     exp_reg_scatter:"",
                //     logic_reg_scatter:"",
                //     line_reg_scatter:"",
                //     scatter_map:"",
                //     thermo_map:"",
                //     basic_funnel:"",
                //     diff_funnel:""
                // },
                chartName:"",
                lineImg:[],
                barImg:[],
                pieImg:[],
                scatterImg:[],
                mapImg:[],
                funnelImg:[],
                echartTypeHead:[]
            }
        },
        mounted() {    
            this.getEchartsData()
        },
        computed:{
            containerStyle() {
                return {
                    transform:`translate3d(${this.distance}px, 0, 0)`
                }
            }
        },
        methods: {
            jumpPage(page){
                if(page == '/dataExplore'){
                    this.$router.push(page);
                    return;
                }
                if(!this.chartName){
                   alert("请选择可用图表");
                   return;
                }
                var path='table/configDataset';
                let postData = {
                      chartName:this.chartName
                    }
                zmitiUtil.Ajax(path,postData).then(res => {
                    var data = res.data;
                    if(data.config){
                        this.$router.push({
                            path: "/dataDimension",
                            query:{
                                dims:this.$route.query.dims,
                                values:this.$route.query.values,
                                chartName:this.chartName,
                                config:JSON.stringify(data.config),
                                seriesOne:JSON.stringify(data.seriesOne),
                                seriesTwo:JSON.stringify(data.seriesTwo)
                            }
                        });
                    }else{
                        this.$router.push({
                            path: "/showIcon",
                            query:{
                                dims:this.$route.query.dims,
                                values:this.$route.query.values,
                                pageCurr:"/echart",
                                chartName:this.chartName
                            }
                        });
                    }
                }).catch((error) => {
                    console.log(error,'error');
                }); 
            },
            getEchartsData(){
                var path='table/availableTable';
                    let postData ={
                        dims: JSON.parse(this.$route.query.dims),
                        values: JSON.parse(this.$route.query.values)
                    }
                    zmitiUtil.Ajax(path,postData).then(res => {
                        var data = res.data;
                        if(data.length==0){
                             alert("请重新选择维度和度量");
                             return;
                        }
                        data.map((item,index) =>{
                            item.items.forEach((val,index) =>{
                                //this.echartSubclass[val] = val;
                                if(val == 'basic_line'){
                                    //this.createChart('myChart', dayChartData)
                                    this.lineImg.push(
                                        {
                                            img:require("../../../assets/echartImg/basic_line.jpeg"),
                                            chart: "basic_line",
                                            echartColor:false
                                        }
                                    )
                                }else if (val == 'area_line'){
                                    this.lineImg.push(
                                        {
                                            img:require("../../../assets/echartImg/area_line.png"),
                                            chart: "area_line",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('myChart2', dayChartData2)
                                }else if (val == 'multi_line'){
                                    this.lineImg.push(
                                        {
                                            img:require("../../../assets/echartImg/multi_line.png"),
                                            chart: "multi_line",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('myChart3', dayChartData3)
                                }else if (val == 'stack_line'){
                                    this.lineImg.push(
                                        {
                                            img:require("../../../assets/echartImg/stack_line.png"),
                                            chart: "stack_line",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('myChart4', dayChartData4)
                                }else if (val == 'smooth_line'){
                                    this.lineImg.push(
                                        {
                                            img:require("../../../assets/echartImg/smooth_line.png"),
                                            chart: "smooth_line",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('myChart5', dayChartData5)
                                }else if (val == 'basic_bar'){
                                    this.barImg.push(
                                        {
                                            img:require("../../../assets/echartImg/basic_bar.png"),
                                            chart: "basic_bar",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('barChart', barChartData)
                                }else if (val == 'multi_bar'){
                                    this.barImg.push(
                                        {
                                            img:require("../../../assets/echartImg/multi_bar.png"),
                                            chart: "multi_bar",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('barChart2', barChartData2)
                                }else if (val == 'bidirection_bar'){
                                    this.barImg.push(
                                        {
                                            img:require("../../../assets/echartImg/bidirection_bar.png"),
                                            chart: "bidirection_bar",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('barChart3', barChartData3)
                                }else if (val == 'line_bar'){
                                    this.barImg.push(
                                        {
                                            img:require("../../../assets/echartImg/line_bar.png"),
                                            chart: "line_bar",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('barChart4', barChartData4)
                                }else if (val == 'stack_bar'){
                                    this.barImg.push(
                                        {
                                            img:require("../../../assets/echartImg/stack_bar.png"),
                                            chart: "stack_bar",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('barChart5', barChartData5)
                                }else if (val == 'basic_pie'){
                                    this.pieImg.push(
                                        {
                                            img:require("../../../assets/echartImg/basic_pie.png"),
                                            chart: "basic_pie",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('pieChart', pieChartData)
                                }else if (val == 'doughnut_pie'){
                                    this.pieImg.push(
                                        {
                                            img:require("../../../assets/echartImg/doughnut_pie.png"),
                                            chart: "doughnut_pie",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('pieChart2', pieChartData2)
                                }else if (val == 'scrolled_pie'){
                                    this.pieImg.push(
                                        {
                                            img:require("../../../assets/echartImg/scrolled_pie.png"),
                                            chart: "scrolled_pie",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('pieChart3', pieChartData3)
                                }else if (val == 'basic_scatter'){
                                    this.scatterImg.push(
                                        {
                                            img:require("../../../assets/echartImg/basic_scatter.png"),
                                            chart: "basic_scatter",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('scatterChart', seleData.default.scatterChartData)
                                }else if (val == 'bubble_scatter'){
                                    this.scatterImg.push(
                                        {
                                            img:require("../../../assets/echartImg/bubble_scatter.png"),
                                            chart: "bubble_scatter",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('scatterChart2', seleData.default.scatterChartData2)
                                }else if (val == 'effect_scatter'){
                                    this.scatterImg.push(
                                        {
                                            img:require("../../../assets/echartImg/effect_scatter.png"),
                                            chart: "effect_scatter",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('scatterChart3', seleData.default.scatterChartData3)
                                }else if (val == 'exp_reg_scatter'){
                                    this.scatterImg.push(
                                        {
                                            img:require("../../../assets/echartImg/exp_reg_scatter.png"),
                                            chart: "exp_reg_scatter",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('scatterChart4', seleData.default.scatterChartData4)
                                }else if (val == 'logic_reg_scatter'){
                                    this.scatterImg.push(
                                        {
                                            img:require("../../../assets/echartImg/logic_reg_scatter.png"),
                                            chart: "logic_reg_scatter",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('scatterChart5', seleData.default.scatterChartData5)
                                }else if (val == 'line_reg_scatter'){
                                    this.scatterImg.push(
                                        {
                                            img:require("../../../assets/echartImg/line_reg_scatter.png"),
                                            chart: "line_reg_scatter",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('scatterChart6', seleData.default.scatterChartData6)
                                }else if (val == 'basic_funnel'){
                                    this.funnelImg.push(
                                        {
                                            img:require("../../../assets/echartImg/basic_funnel.png"),
                                            chart: "basic_funnel",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('funnelPlotChart', seleData.default.funnelPlotChartData)
                                }else if (val == 'diff_funnel'){
                                    this.funnelImg.push(
                                        {
                                            img:require("../../../assets/echartImg/diff_funnel.png"),
                                            chart: "diff_funnel",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('funnelPlotChart2', seleData.default.funnelPlotChartData2)
                                }else if (val == 'scatter_map'){
                                    this.mapImg.push(
                                        {
                                            img:require("../../../assets/echartImg/scatter_map.png"),
                                            chart: "scatter_map",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('dituChart', seleData.default.mapChartData)
                                }else if (val == 'thermo_map'){
                                    this.mapImg.push(
                                        {
                                            img:require("../../../assets/echartImg/thermo_map.png"),
                                            chart: "thermo_map",
                                            echartColor:false
                                        }
                                    )
                                    //this.createChart('dituChart2', seleData.default.mapChartData2)
                                }
                            })
                            echartType.map((items,index) =>{
                                 if(items.category == item.category){
                                    this.echartTypeHead.push({
                                        value:items.category,
                                        name:items.name,
                                        color:false
                                   })
                                 }
                            }) 
                        })
                        this.echartType[this.echartTypeHead[0].value] = this.echartTypeHead[0].value;
                        this.echartTypeHead[0].color = true;
                        // if(!this.echartType.line){
                        //     document.getElementsByClassName("ivu-tabs-tab")[0].style.display = 'none'
                            
                        // }
                        // if(!this.echartType.bar){
                        //     document.getElementsByClassName("ivu-tabs-tab")[1].style.display = 'none'
                        // }
                       
                        // if(!this.echartType.pie){
                        //     document.getElementsByClassName("ivu-tabs-tab")[2].style.display = 'none'
                        // }
                        // if(!this.echartType.scatter){
                        //     document.getElementsByClassName("ivu-tabs-tab")[3].style.display = 'none'
                        // }
                        // if(!this.echartType.map){
                        //     document.getElementsByClassName("ivu-tabs-tab")[4].style.display = 'none'
                        // }
                        // if(!this.echartType.funnel){
                        //     document.getElementsByClassName("ivu-tabs-tab")[5].style.display = 'none'
                        // }
                    
                        // var tabpane = document.getElementsByClassName("ivu-tabs-tabpane");
                        // for(var i=0;i<tabpane.length;i++){
                        //     tabpane[i].style.visibility = 'visible'
                            
                        // }
                    }).catch((error) => {
                        console.log(error,'error');
                    });   
            },
            createChart(chartId, chartData) {
                let myCharts = echarts.init(document.getElementById(chartId));
                //防止越界，重绘canvas
                window.onresize = myCharts.resize;
                myCharts.setOption(chartData);//设置option
                window.addEventListener('resize', function () {myCharts.resize()})
            },
            chooseChart(index,mgs,selectArr){//查询可用的图表
                this[selectArr].forEach((item,index)=>{
                    item.echartColor = false;
                })
                this[selectArr][index].echartColor = true;
                this.chartName = mgs;
                var path='table/chooseChart';
                let postData = {
                      chartName:mgs
                    }
                    zmitiUtil.Ajax(path,postData).then(res => {
                        var data = res.data;
                        if(data.code==1){
                           console.log("查询可用的图表")
                        }
                    }).catch((error) => {
                        console.log(error,'error');
                    }); 
            },
            selectChart(mgs){
               this.echartTypeHead.forEach((item,index) => {
                   item.color = false;
                   this.echartType[item.value] = false;
                   if(item.value == mgs){
                     item.color = true;
                   }
               })
               this.echartType[mgs] = true;
            }
        },
        created() {
        },
        watch:{
            
        },
    }
</script>
<style scoped>
    .btnOperation{
        height: 27px;
    }
    .btnMargin{
        margin-left: 1.125rem;
    }
    .ivu-icon-dataExplore{
        width: 16px;
        height: 16px;
        background: url("../../../assets/dataExplore.png") no-repeat;
        background-size: 100%;
        position: relative;
        display: inline-block;
        top: 2px;
    }
    .slider{
        overflow: hidden;
        color: #005bbe;
        border-bottom: 1px solid #f4f7ff;
    }
    .container{
      width: 80%;
      display: flex;
    }
    .container li{
        margin: 0;
        padding: 0 20px;
        cursor: pointer;
        list-style: none;
        color: #62697a;
        line-height: 30px;
    }
    .container li.active{
        color: #0e7fff;
    }
    .container li.active span{
        border-bottom:2px solid #2d8cf0 ;
        display: inline-block;
    }
    .select{
        border: 1px solid #2e8bf0;
    }
</style>